/*
懒加载：需要target，还需要api方法，提供list数据
*/
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function lazyLoad (api) {
  const list = ref([])
  const target = ref(null) // 响应式数据，需要暴露出去，外界获取dom
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        stop()
        // const api = function () {
        //   return new Promise((resolve, reject) => {
        //     resolve({
        //       result: [1, 2, 3]
        //     })
        //   })
        // }
        api().then(res => {
          list.value = res.result
        })
      }
    },
    {
      threshold: 0
    }
  )

  return { list, target }
}
